<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <div class="container">
        <p>我是p1111</p>
        <p class="active">我是p2222</p>
        <p>我是p3333</p>
    </div>
    <button>点击</button>
    <script>
        // 元素操作： 增、删、改、查；
        // 元素的新增 
        // 一、创建元素document.createElement(“元素名”);
        // 只能在doucument里创建
       var ele =  document.createElement("div");
       ele.innerHTML = "我是内容";
       console.log(ele);

        // 二、把创建出来的元素 添加到document里
        // 1. 父元素.appendChild(元素对象);
        // var btn = document.querySelector("button");
        // var containerEle = document.querySelector(".container");
        // btn.onclick = function(){
        //     // containerEle.appendChild(ele);
        //     // containerEle.innerHTML = "添加的内容";
        //     // containerEle.appendChild("<div>hello</div>");// 错误写法
        //     // containerEle.innerHTML = ele;  // 不需要 ，错误的写法 ；
        // }

        // 和 innerHTML的区别 
        // 1.innerHTML 是=号赋值  appendChild();
        // 2.innerHTML会覆盖之前的内容   appendChild 会在之前的内容基础上追加，加在最后面
        // 3.innerHTML后是一个字符串 appendChlid()里面是一个元素对象

        // 2.把创建的元素 添加到某个元素之前 
        // 父元素.insertBefore(newElement,oldElement);
        var containerEle = document.querySelector(".container");
        var pELe = document.querySelector(".active");
        var btn = document.querySelector("button");
        btn.onclick = function(){
            containerEle.insertBefore(ele,pELe);
        }


    </script>
</body>
</html>